<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$route.query.name">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 头部 -->
      <div class="headTop">
        <div class="headTopLeft">
          <div class="directoryName">
            <span>标签名称</span>
            <el-input v-model="query.tagName" size="small"></el-input>
          </div>
          <div class="tagStatus">
            <span class="text">状态</span>
            <el-select v-model="query.state" placeholder="请选择" size="small">
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
            <el-button size="small" type="default" @click="clearSearch">清除</el-button>
            <el-button size="small" type="primary" @click="getTagsList">搜索</el-button>
          </div>
        </div>
        <div class="headTopRight">
          <el-link v-if="$route.query.name" icon="el-icon-back" type="primary" :underline="false" @click="$router.back()">返回学科</el-link>
          <el-button type="success" size="small" icon="el-icon-edit" @click="addTagDialog = true">新增标签</el-button>
        </div>
      </div>
      <!-- 头部 -->
      <!-- alert -->
      <el-alert
        class="alertInfo"
        :title="'数据一共' + total + '条'"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <!-- alert -->
      <!-- 表格 -->
      <el-table
      :data="tagsTableData"
      style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科">
        </el-table-column>
        <el-table-column
          prop="tagName"
          label="标签名称">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者">
        </el-table-column>
        <el-table-column
          label="创建日期">
          <template slot-scope="scope">
             {{ scope.row.addDate | parseTime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? '已禁用' : '已启用' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
          <el-link type="primary" :underline="false" :disabled="false" @click="changStateLink(scope.row)">{{ scope.row.state === 1 ? '启用' : '禁用'}}</el-link>
          <el-link type="primary" :underline="false" :disabled="!scope.row.state" @click="editTag(scope.row)">修改</el-link>
          <el-link type="primary" :underline="false" :disabled="!scope.row.state" @click="openDelete(scope.row,scope.$index)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        background
        :page-sizes="[5, 10, 20, 50]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total">
    </el-pagination>
      <!-- 分页器 -->
    </el-card>
    <!-- 新增标签 -->
    <el-dialog
      title="新增标签"
      :visible.sync="addTagDialog"
      width="30%"
      :before-close="closeTagDialog">
      <tags-add @close="closeAddTagDialog" v-if="addTagDialog"></tags-add>
    </el-dialog>
    <!-- 修改标签 -->
    <el-dialog
      title="修改标签"
      :visible.sync="editTagDialog"
      width="30%"
      :before-close="closeEditDialog">
    <el-form
      label-width="80px"
      :model="editTagForm"
      :rules="editTagFormRules"
      ref="editTagForm"
    >
      <el-form-item label="所属学科">
        <el-select v-model="editTagForm.subjectId" placeholder="请选择">
          <el-option
            v-for="(subject,subjectIndex) in subjectsList"
            :key="subjectIndex"
            :label="subject.subjectName"
            :value="subject.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签名称" prop="tagName">
        <el-input v-model="editTagForm.tagName" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="editTagDialog = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('editTagForm')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
// 标签列表,标签状态,修改标签,删除标签
import { list, changeState, update, remove } from '@/api/hmmm/tags.js'

// 学科列表
import { list as subjectList } from '@/api/hmmm/subjects.js'

// 导入新增标签组件
import TagsAdd from '@/module-hmmm/components/tags-add.vue'

export default {
  name: 'tags',
  data () {
    return {
      // 标签表格数据
      tagsTableData: [],
      // 分页器查询参数
      query: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: null,
        state: null
      },
      // 总数
      total: 0,
      // 添加标签弹出框
      addTagDialog: false,
      // 修改标签弹出框
      editTagDialog: false,
      // 修改标签弹出框数据
      editTagForm: {
        subjectId: '',
        tagName: ''
      },
      // 修改标签弹出框规则
      editTagFormRules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      // 学科列表数据
      subjectsList: [],
      // 当前tagId
      tagId: null
    }
  },
  methods: {
    // 获取标签列表数据
    async getTagsList () {
      if (this.$route.query.id) {
        this.query.subjectID = parseInt(this.$route.query.id)
      }
      const { data: res } = await list(this.query)
      this.tagsTableData = res.items
      this.total = res.counts
    },
    // 分页器
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getTagsList()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getTagsList()
    },
    // 清除搜索数据
    clearSearch () {
      this.query.tagName = null
      this.query.state = null
    },
    // 改变启动状态
    async changStateLink (tagItem) {
      await changeState({
        id: tagItem.id,
        state: tagItem.state === 1 ? '0' : '1'
      })
      tagItem.state = tagItem.state === 1 ? 0 : 1
    },
    // 修改tag
    async editTag (tagItem) {
      this.editTagDialog = true
      this.tagId = tagItem.id
      // 获取学科列表
      this.getSubjectList()
    },
    // 删除弹框
    openDelete (tagItem, index) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({
          id: tagItem.id
        })
        this.tagsTableData.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        return false
      })
    },
    // 关闭添加标签弹出框
    closeTagDialog () {
      this.addTagDialog = false
    },
    // 关闭添加弹出框
    closeAddTagDialog () {
      this.addTagDialog = false
      this.getTagsList()
    },
    closeEditDialog () {
      this.editTagDialog = false
    },
    // 获取学科列表
    async getSubjectList () {
      const { data: res } = await subjectList()
      this.subjectsList = res.items
    },
    // 提交修改标签
    submitForm (editTagForm) {
      this.$refs.editTagForm.validate(async (valid) => {
        if (valid) {
          await update({
            id: this.tagId,
            subjectID: this.editTagForm.subjectId,
            tagName: this.editTagForm.tagName
          })
          this.editTagDialog = false
          this.getTagsList()
          this.$message.success('操作成功')
        } else {
          return false
        }
      })
    }
  },
  components: {
    TagsAdd
  },
  created () {
    // 获取标签列表数据
    this.getTagsList()
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 0 10px;
  .box-card {
    min-width: 100vh;
    .el-breadcrumb {
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
    }
    .headTop {
      display: flex;
      justify-content: space-between;
      .headTopLeft {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #606266;
        font-weight: 700;
        .directoryName {
          display: flex;
          align-items: center;
          margin-right: 40px;
          span {
            padding-right: 15px;
          }
          .el-input {
            width: unset;
          }
        }
        .tagStatus {
          display: flex;
          align-items: center;
          span {
            padding-right: 15px;
          }
          .text {
            min-width: 50px;
          }
          .el-select {
            width: 50px;
            margin-right: 15px;
          }
        }
      }

    }
    .alertInfo {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .el-link {
      margin-right: 10px;
    }
  }
  .el-pagination {
    float: right;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .el-dialog {
    min-width: 100%;
  }
  .el-select {
    min-width: 100%;
  }
}
</style>
